<template>
  <!-- 详情页 -->
  <div id="detail">
    <!-- 使用顶部导航栏组件 -->
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav" />
    <!-- 使用轮播图组件 -->
    <scroll class="content" ref="scroll" @scroll="contentScroll" :probeType="3">
      <detail-swipem :top-images="topImages" />
      <!-- 使用商品介绍的组件 -->
      <detail-baselnfo :goods="goods" />
      <!-- 使用店铺相关介绍的组件 -->
      <dwsail-shop-ibfo :shop="Shop" />
      <!-- 使用店铺商品的组件 -->
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad" />
      <!-- 使用店铺商品的参数组件 -->
      <detail-paraminfo :paramInfo="paramInfo" ref="params" />
      <!--使用店铺商品的评论组件  -->
      <detail-comment-info :commentInfo="commentInfo" ref="comment" />
      <!-- 商品推荐 -->
      <goods-list :goods="recommends" class="recommends" ref="recommend" />
    </scroll>
    <!-- 底部导航 @addCart="addToCart" 接收加入购物车的事件-->
    <detail-bottom-bar @addCart="addToCart" />
    <!-- .native 监听组件的修饰符  返回顶部按钮-->
    <back-top @click.native="backCLick" v-show="isShowBackTop" />
 <taost :message="message" :show="show"/>
  </div>
</template>

<script>
// 引入顶部的导航栏组件
import DetailNavBar from "./childComps/DetailNavBar";
// 引入轮播图组件
import DetailSwipem from "./childComps/DetailSwipem";
// 导入商品介绍的组件
import DetailBaselnfo from "./childComps/DetailBaselnfo";
// 导入店铺相关介绍的组件
import DwsailShopIbfo from "./childComps/DwsailShopIbfo";
// 导入店铺商品的组件
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
// 导入商品参数组件
import DetailParaminfo from "./childComps/DetailParaminfo";
// 导入商品评论组件
import DetailCommentInfo from "./childComps/DetailCommentInfo";
// 底部的购物车
import DetailBottomBar from "./childComps/DetailBottomBar.vue";

//导入滚动的插件
import Scroll from "components/common/scroll/Scroll";
// 商品推荐
import GoodsList from "components/cortent/goods/GoodsList";

// 导入混入函数
import { itemListenerMixin, backTopMixin } from "common/mixin";
// 导入防抖函数
import { debounce } from "common/utils";

import { mapActions } from "vuex";

//导入弹窗组件
import Taost from "components/common/toast/Taost"

// 引入详情页的数据
import {
  getDetail,
  GoodsInfo,
  Shop,
  GoodsParam,
  getRecommend,
} from "network/detail";

export default {
  name: "Datail",
  components: {
    DetailNavBar,
    DetailSwipem,
    DetailBaselnfo,
    DwsailShopIbfo,
    Scroll,
    DetailGoodsInfo,
    DetailParaminfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar,
   Taost
  },
  // 使用混入  混入内的生命周期函数会比自生的生命周期函数先调用
  mixins: [itemListenerMixin, backTopMixin],
  data() {
    return {
      //  商品的id
      iid: null,
      //  轮播图数据
      topImages: null,
      //  商品相关的文字和图片
      goods: {},
      //  店铺相关的文字和图片
      Shop: {},
      //  店铺商品相关的数据
      detailInfo: {},
      //  商品参数信息
      paramInfo: {},
      // 商品评论
      commentInfo: {},
      // 推荐的数据
      recommends: [],
      // 存放顶部导航栏的对应内容的位置
      themeTopYs: [],
      // 存放防抖函数的处理结果
      getThemeTopY: null,
      // 滚动时要改变的顶部导航栏的下标
      currentIndex: null,
      // 点击加入购物车之后的弹窗内容
      message:"",
      // 决定是否显示弹窗
      show:false
    };
  },
  //  组件创建完之后调用
  created() {
    // 1.保存传入的iid
    this.iid = this.$route.params.iid;

    // 2.根据iid请求详情数据
    getDetail(this.iid).then((res) => {
      // console.log(res);
      // 1.获取数据
      const data = res.result;
      // 2.获取顶部轮播图数据
      this.topImages = data.itemInfo.topImages;

      // 3.获取并创建商品信息对象 利用类创建实例对象
      this.goods = new GoodsInfo(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );

      // 4.获取并创建店铺的信息对象
      this.Shop = new Shop(data.shopInfo);

      // 5.保存商品的详情数据
      this.detailInfo = data.detailInfo;

      // 6.获取商品参数信息
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );

      // 7.获取评论信息
      // 因为有些商品没有评论,所以我们做一个判断
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }
      // 数据全部渲染完才会调用这个函数
      // this.$nextTick(() => {
      // });
    });
    // 3.请求推荐的数据
    getRecommend().then((res) => {
      this.recommends = res.data.list;
    });

    // 4. 对顶部导航栏获取组件位置 使用防抖函数
    this.getThemeTopY = debounce(() => {
      this.themeTopYs = [];
      // $el 获取组件内的元素 因为组件没有offsetTop属性
      //  商品
      this.themeTopYs.push(0);
      //  商品参数距离顶部的距离
      this.themeTopYs.push(this.$refs.params.$el.offsetTop);
      //  评论
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      //  推荐
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
      // 追加一个最大值方便下面做判断 Number.MAX_VALUE(数字的最大值)
      // this.themeTopYs.push(Number.MAX_VALUE);
    }, 100);
  },
  // 组件被挂载之后触发
  mounted() {
    // console.log("我是自身的生命周期函数");
  },
  // 组件被销毁时调用
  destroyed() {
    // 取消详情页的全局事件监听
    this.$bus.$off("itemImgLoad", this.itemImgListener);
  },
  // 页面的数据发生变化时调用
  updated() {},
  methods: {
    // 将组件内的addCart方法映射到vuex状态管理内
    ...mapActions(["addCart"]),
    // 商品图片加载完之后就会调用这个函数
    imageLoad() {
      // 手动刷新滚动的数据
      this.$refs.scroll.refresh();

      // 调用顶部导航栏获取组件位置的函数
      this.getThemeTopY();
    },
    // 点击顶部的导航栏滚动到指定的位置
    titleClick(index) {
      // Y轴向下滚是负值
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 200);
    },
    // 滚动的指定的位置就切换顶部导航栏的按钮
    contentScroll(position) {
      // 1. 获取Y值   Number.MAX_VALUE数字的最大值
      const positoinY = -position.y;
      // 2.positoinY和主题中的值相对比
      let length = this.themeTopYs.length;
      for (let i = 0; i < length - 1; i++) {
        if (
          this.currentIndex !== i &&
          positoinY >= this.themeTopYs[i] &&
          positoinY < this.themeTopYs[i + 1]
        ) {
          this.currentIndex = i;
          this.$refs.nav.currentIndex = this.currentIndex;
        }
        
      }
     
      // 3.返回顶部按钮是否显示
      this.listenShowBackTop(position);
    },
    // 点击加入购物车
    addToCart() {
      // 1. 获取购物车需要展示的信息
      const product = {};
      // 图片
      product.image = this.topImages[0];
      // 标题
      product.title = this.goods.title;
      // 商品的描述
      product.desc = this.goods.desc;
      // 价格
      product.price = this.goods.realPrice;
      // 商品的id
      product.iid = this.iid;

      // 2.将商品添加到购物车模块里面(这里先把要加入购物车商品数据,传给Vuex进行共享)
      // 方法1
      // this.$store 调用仓库(./store/index.js)  commit 提交到mutations内 increment 事件类型
      // this.$store.commit("addCart", product);
      // dispatch 提交到actions内
      // this.$store.dispatch("addCart", product)
      // .then(res =>{
      //   console.log(res);
      // })
      // 方法2  通过辅助函数把addCart方法映射到Vuex 的文件内
      this.addCart(product).then((res) => {
        // 这里是加入购物车成功之后才会触发
        // this.message = res
        // this.show = true
        // setTimeout(()=>{
        //   this.show = false
        // },1500)
      //  res 要显示的文字   1500 文字消失的时间,可以不传使用默认的
        this.$toast.show(res,1500)
      });
    },
  },
};
</script>

<style scoped>
#detail {
  position: relative;
  top: 44px;
  right: 0;
  left: 0;
  height: 100vh;
  background-color: #fafafa !important;
}
.content {
  height: calc(100% - 44px - 49px);
}
.detail-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
}
.recommends img {
  width: 98%;
}
</style>